<template>
  <div class="login">
    <div class="top">
      <van-icon name="arrow-left" size="25" @click="onBack" />
    </div>
    <div class="content">
      <div class="title">用户登录</div>
      <div class="text">Hi，欢迎来到网上厨房，会做饭很酷~</div>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="phone"
            placeholder="请输入手机号"
            @input="onInput"
          />
          <van-field
            v-model="password"
            type="password"
            placeholder="请输入密码"
            @input="onInput"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              :disabled="disabled"
              color="#fbb705"
              type="info"
              native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
      </div>
      <div class="r" @click="toRegistered">还没有账号？点击前往注册</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      phone: "",
      password: "",
      disabled: true,
      users: [],
    };
  },
  created() {
    if (localStorage.getItem("users")) {
      this.users = JSON.parse(localStorage.getItem("users"));
    }
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    onInput() {
      if (this.phone != "" && this.password != "") {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    onSubmit() {
      this.users.forEach((ele) => {
        if (this.phone == ele.phone && this.password == ele.password) {
          this.$notify({
            type: "success",
            message: "登录成功",
          });
          ele.isLogin = true
          localStorage.setItem('users',JSON.stringify(this.users))
          setTimeout(()=>{
            this.$router.push({name:'My'})
          },1000)
        }else if((this.phone == ele.phone && this.password != ele.password) || this.phone != ele.phone){
            this.$notify({ type: "danger", message: "账号或密码不正确" });
        }
      });
    },
    toRegistered(){
        this.$router.push({name:'Registered'})
    }
  },
};
</script>

<style lang="scss" scoped>
.login {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  .top {
    width: 100%;
    padding: 40px 10px 10px;
    background-color: #fbb705;
  }
  .content {
    padding: 30px;
    .title {
      font-size: 25px;
    }
    .text {
      color: #999;
      margin-top: 10px;
    }
    .form {
      margin-top: 40px;
      .van-cell {
        font-size: 16px;
        padding: 15px 0;
      }
    }
    .r{
       width: 100%;
       text-align: center; 
    }
  }
}
</style>